<template>
  <div class="pagecommaintain-container">
    <div class="table-header">
      <el-row>
        <el-col :span="2">
          <el-button @click="createPageComponent"
                     type="primary">新增</el-button>
        </el-col>
        <el-col :span="10"
                :offset="12"
                class="header-box">
          <el-select class="col-4"
                     v-model="requestParam.moudle_type">
            <el-option label="首页"
                       value="1"></el-option>
          </el-select>
          <el-input class="col-5"
                    placeholder="请输入模块名称"
                    v-model="requestParam.moudle_name"></el-input>
          <el-button class="header-right-button"
                     style="text-align:right;"
                     type="primary"
                     @click="onSearchModuleData">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :highlight-current-row="true"
              class="module-list-table"
              :header-cell-style="{background:'#f5f5f5'}"
              :data="pageMaintainData.list"
              border>
      <el-table-column prop="page_tmp_name"
                       label="页面"
                       align="center"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="moudle_name"
                       label="模块名称"
                       align="center"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="moudle_type"
                       label="类型"
                       align="center"
                       :formatter="handleModuleTypeFilter"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="router"
                       label="路由地址"
                       align="center"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="height"
                       label="高度"
                       align="center"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="width"
                       label="宽度"
                       align="center"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="flush_time"
                       label="刷新时间"
                       align="center"
                       show-overflow-tooltip></el-table-column>
      <el-table-column label="操作"
                       align="center"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button @click="editPageComponent(scope.row)"
                     type="text">编辑</el-button>
          <el-button type="text"
                     @click="delPageModule(scope.row.page_moudle_id,scope.row.moudle_name)">删除</el-button>
          <el-button @click="modulePreview(scope.row)"
                     type="text">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination @current-change='handlePageChange' :current-page='requestParam.page'
      :page-size='requestParam.page_size' layout='total,sizes,prev, pager, next, jumper' background
      :total='pageMaintainData.total_count' align='center'>
    </el-pagination>-->
    <el-pagination :current-page="requestParam.page"
                   @current-change="handlePageChange"
                   :page-size="requestParam.page_size"
                   layout="total, prev, pager, next, jumper"
                   :total="pageMaintainData.total_count"
                   align="center"></el-pagination>
    <EditPageComDialog :dialogVisible.sync="editPageDialogVisible"
                       :dialogStatus="editPageDialogStatus"
                       :dialogPageType="pageTypeId"
                       @backStatus="getSureStatus"
                       :dialogData="editPageDialogData"></EditPageComDialog>
    <ModulePreviewDialog :dialogVisible.sync="modulePreviewDialogVisible"
                         :layoutData="layoutData"></ModulePreviewDialog>
  </div>
</template>
<script>
import EditPageComDialog from "./components/EditPageComDialog";
import ModulePreviewDialog from "./components/ModulePreviewDialog";
import { pageComMaintainApi } from "@/services/SystemSetting";
import { standardCodeApi } from '@/services/StandardCode';
export default {
  components: {
    EditPageComDialog,
    ModulePreviewDialog
  },
  data () {
    return {
      requestParam: {
        page: 1,
        per_page: 10,
        moudle_type: "1",
        moudle_name: ""
      },

      pageMaintainData: {
        list: [],
        total_page: 0,
        total_count: 0
      },
      // 修改页面模块弹框是否可见
      editPageDialogVisible: false,
      // 新增或编辑页面模块弹框状态
      editPageDialogStatus: "",
      // 新增或编辑页面模块弹框数据对象
      editPageDialogData: {},
      // 预览模块弹框是否可见
      modulePreviewDialogVisible: false,
      // 预览模块弹框所展示模块的数据
      layoutData: {},
      pageTypeId: 1,
      moduleTypeData: []
    };
  },
  computed: {
    // getComponentAuth (name) {
    //   let store = this.$store.state.pageAuth || {}
    //   this.$store.getters.getComponentAuth(name)
    //   return store
    // }
  },
  methods: {
    //查询
    onSearchModuleData () {
      this.handlePageChange(1)
    },
    handlePageChange (page) {
      this.requestParam.page = page;
      this.getModuleList();
    },
    // 编辑页面模块
    editPageComponent (row) {
      this.editPageDialogVisible = true;
      this.editPageDialogStatus = "edit";
      this.editPageDialogData = row;
    },
    // 新增页面模块
    createPageComponent () {
      this.editPageDialogVisible = true;
      this.editPageDialogStatus = "add";
    },
    // 删除页面模块
    delPageModule (id, moudle_name) {
      this.$confirm('您确定删除"' + moudle_name + '"模块?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        pageComMaintainApi
          .delPageModuleData({
            data: {
              id: id
            }
          })
          .then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功!");
              this.requestParam.page = 1;
              this.getModuleList();
            } else {
              this.$message.error(res.msg);
            }
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 获取模块列表
    getModuleList () {
      pageComMaintainApi
        .getPageModuleList({
          params: this.requestParam
        })
        .then(res => {
          if (res.data) {
            this.pageMaintainData.list = res.data.data;
            this.pageMaintainData.total_count = res.data.total;
          }
        });
    },
    // 获取页面树
    getPageTreeData () {
      pageComMaintainApi.getPageTree().then(res => {
      });
    },
    // 获取编辑,添加完成状态刷新数据
    getSureStatus (data) {
      this.getModuleList();
    },
    // 预览模块
    modulePreview (row) {
      this.layoutData = row;
      this.modulePreviewDialogVisible = true;
    },
    // 获取模块类型列表
    getModuleTypeList () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "pageMoudleType"
          }
        })
        .then(
          res => {
            if (res.data) {
              this.moduleTypeData = res.data.list;
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    handleModuleTypeFilter (row) {
      var moduleType;
      this.moduleTypeData.filter(item => {
        if (item.value == row.moudle_type) {
          moduleType = item.name;
        }
      });
      return moduleType;
    }
  },
  created () {
    this.getModuleList();
    this.getModuleTypeList()
    // this.getPageTreeData();
  },
  mounted () { }
};
</script>
<style scoped lang='scss'>
.header-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.pagecommaintain-container {
  padding: 20px;
  .table-header {
    width: 100%;
    height: 64px;
    background-color: #fff;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
  }

  .module-list-table {
    margin-bottom: 40px;
  }
}
</style>
